<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-10-29 17:47
  PageName：h_practice1_TransformImage.html
  Function：实战案例 - 设计图片旋转功能
  URL：http://localhost:8080/h_list/h2_list_create/h_practice1_TransformImage.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - 设计图片旋转功能</title>

    <script>
        function imageRotation(name) {
            document.getElementById('image').className = name;
        }
    </script>

    <style type="text/css">
        .rotate-90 {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg)
        }

        .rotate-180 {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg)
        }

        .flip-horizontal {
            -webkit-transform: scaleX(-1);
            -moz-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            transform: scaleX(-1)
        }

        .flip-vertical {
            -webkit-transform: scaleY(-1);
            -moz-transform: scaleY(-1);
            -o-transform: scaleY(-1);
            transform: scaleY(-1)
        }
    </style>
</head>

<body>
<img src="../a_list_structure/images/1.png" width="500" contextmenu="demo-image" id="image"/>

<menu id="demo-image" type="context">
    <menu label="旋转图像">
        <menuitem icon="images/icon1.png" onclick="imageRotation('rotate-90')">旋转90度</menuitem>
        <menuitem icon="images/icon2.png" onclick="imageRotation('rotate-180')">旋转180度</menuitem>
        <menuitem icon="images/icon4.png" onclick="imageRotation('flip-horizontal')">水平翻转</menuitem>
        <menuitem icon="images/icon3.png" onclick="imageRotation('flip-vertical')">垂直翻转</menuitem>
    </menu>
</menu>
</body>
</html>